<template>
	<view>
		<u-status-bar></u-status-bar>
		<view class="con">
			<view class="con__box">
				<view class="u-flex u-flex-y-center u-flex-between con__box__top">
					<view class="con__box__title">
						<image src="/static/img/team/outline-convertshape.png" class="con__box__title__icon" mode="">
						</image>
						团队概况
					</view>
					<view class="con__box__more" @click="navto('/pages/team/junior')">
						直属下级>>
					</view>
				</view>
				<view class="con__box__gk">
					<view class="con__box__gk__item">
						<view class="con__box__gk__item__value">
							{{teamdata.iChildCount}}
						</view>
						<view class="con__box__gk__item__text">
							直属下级
						</view>
					</view>
					<view class="con__box__gk__item">
						<view class="con__box__gk__item__value">
							{{teamdata.groupTotalMoney}}
						</view>
						<view class="con__box__gk__item__text">
							团队总收益
						</view>
					</view>
					<view class="con__box__gk__item">
						<view class="con__box__gk__item__value">
							{{teamdata.childChildCount}}
						</view>
						<view class="con__box__gk__item__text">
							间接下属
						</view>
					</view>
					<view class="con__box__gk__item">
						<view class="con__box__gk__item__value">
							{{teamdata.groupIncome}}
						</view>
						<view class="con__box__gk__item__text">
							团队抽成
						</view>
					</view>
				</view>
				<view class="con__box__footer">
					<u-button text="团队报表" @click="navto('/pages/team/statement')" color="#6492FF"
						shape='circle'></u-button>
				</view>
			</view>
			<view class="con__box">
				<view class="u-flex u-flex-y-center u-flex-between con__box__top">
					<view class="con__box__title">
						<image src="/static/img/team/hb.png" class="con__box__title__icon" mode=""></image>
						邀请海报
						<text class="con__box__title__text">（左右滑动选择海报模板）</text>
					</view>

				</view>
				<view class="con__box__swp">
					<u-swiper :list="list3" keyName='qr' previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
						bgColor="#ffffff" height='450rpx' imgMode='heightFix' :current='current'> 
					</u-swiper>
				</view>
				<view class="con__box__footer">
					<u-button text="立即下载" @click="todown" color="#6492FF" shape='circle'></u-button>
				</view>

			</view>
			<view class="con__box">
				<view class="u-flex u-flex-y-center u-flex-between con__box__top">
					<view class="con__box__title">
						<image src="/static/img/team/bl.png" class="con__box__title__icon" mode=""></image>
						邀请抽成比例
					</view>

				</view>
				<view class="con__box__content">
					邀请默认抽成比例
					<text class="con__box__content__b33">{{teamdata.factor.toFixed(1)}}%</text>
				</view>
				<view class="con__box__footer">
					<u-button text="抽成设置" @click="navto('/pages/team/commission?Ratio='+teamdata.factor)"
						color="#6492FF" shape='circle'></u-button>
				</view>

			</view>
			<view class="con__box">
				<view class="u-flex u-flex-y-center u-flex-between con__box__top">
					<view class="con__box__title">
						<image src="/static/img/team/wx.png" class="con__box__title__icon" mode=""></image>
						绑定联系方式
					</view>

				</view>
				<view class="con__box__content">
					方便团队与您联系
					<text class="con__box__content__b33" v-if="teamdata.linker">已绑定</text>
					<text class="con__box__content__b33" v-else>未绑定</text>
				</view>
				<view class="con__box__footer">
					<u-button text="绑定/修改" @click="navto('/pages/team/bind')" color="#6492FF" shape='circle'></u-button>
				</view>

			</view>
			<view class="con__box">
				<view class="u-flex u-flex-y-center u-flex-between con__box__top">
					<view class="con__box__title">
						<image src="/static/img/team/jc.png" class="con__box__title__icon" mode=""></image>
						邀请教程
					</view>

				</view>
				<view class="con__box__content" v-if="teamdata.iInviteLesson" style="padding: 0 66rpx;">
					<u-parse :content="teamdata.iInviteLesson.content" selectable></u-parse>
				</view>

			</view>
		</view>
		<image src="/static/img/home/kf.png" @click="navto('/pages/home/kh')" class="kf" mode=""></image>
	</view>
</template>

<script>
	import {
		groupindex,
		inviteCode
	} from '@/api/team.js'
	export default {
		data() {
			return {
				list3: [],
				teamdata: {},
				qrcode: '',
				current:0
			};
		},
		onLoad() {
			// this.addWatermark('/static/img/team/yq2.png','/static/img/team/wx.png')
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		methods: {
			init(){
				this.list3=[]
				groupindex().then(res => {
					if (res.data.code == 200) {
						this.teamdata = res.data.data
						this.teamdata.posterList.map(t => {
							this.list3.push({
								backImg: t.backImg,
								qr: '',
								codePosition:t.codePosition
							})
						})
						// 生成邀请二维码
						inviteCode().then(res1 => {
							uni.stopPullDownRefresh()
							if (res1.data.code == 200) {
								this.qrcode = res1.data.data
								// console.log(this.qrcode)
								this.list3.map((t,i) => {
									this.addWatermark(t.backImg, this.qrcode, i,t.codePosition)
								})
							}
				
				
						})
					}
				})
			},
			todown(){
				// console.log(1231)
				if(!this.list3[this.current].qr){
					return
				}
				var link = document.createElement("a");
				link.href = this.list3[this.current].qr;
				link.download = "your-file-name.png";
				link.click();
			},
			addWatermark(imagePath, watermarkPath,i,codePosition) {
				let _this=this
				var canvas = document.createElement('canvas');
				var context = canvas.getContext('2d');

				// 创建一个新的Image对象，用于加载原始图片
				var image = new Image();
				image.src = imagePath;
				image.crossOrigin = "Anonymous";
				// 在图片加载完成后执行下面的代码
				image.onload = function() {
					canvas.width = image.width;
					canvas.height = image.height;
					// 将原始图片绘制到canvas上
					context.drawImage(image, 0, 0);
					// 创建一个新的Image对象，用于加载水印图片
					var watermark = new Image();
					watermark.src = watermarkPath;
					watermark.crossOrigin = "Anonymous";
					// console.log(image.width)
					// 在水印图片加载完成后执行下面的代码
					watermark.onload = function() {
						// 设置水印的位置和尺寸
						console.log(codePosition)
						var width = watermark.width/1.5;
						var height = watermark.height/1.5;
						switch (codePosition){
							case 0://中下
								var x = image.width/2-width/2;
								var y = image.height-height*2;
								break;
							case 1://左下
								var x = 50;
								var y = image.height-height*2;
								break;
							case 2://右下
								var x = image.width-width-50;
								var y = image.height-height*2;
								break;
							default:
								
								break;
						}
						// 平铺水印图片
						context.drawImage(watermark,x,y,width,height);
						// context.fillRect(x, y, width, height);
						// 将带有水印的图片转换为base64格式
						var watermarkedImage = canvas.toDataURL();
						_this.list3[i].qr=watermarkedImage
						// console.log(watermarkedImage)
					};
				};
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.con {
		padding: 33rpx 16rpx 106rpx;

		&__box {
			margin-bottom: 25rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			padding-bottom: 25rpx;

			&__top {
				padding: 27rpx 16rpx;

			}

			&__title {
				font-family: Source Han Sans SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #3E3D3D;
				line-height: 38rpx;
				display: flex;
				align-items: center;

				&__icon {
					width: 36.81rpx;
					height: 36.81rpx;
					margin-right: 15rpx;
				}

				&__text {
					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 25rpx;
					color: #989898;
					line-height: 25rpx;
				}
			}

			&__more {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #3E3D3D;
				line-height: 26rpx;
				margin-right: 70rpx;
			}

			&__gk {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;

				&__item {
					width: 50%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 44rpx;

					&__value {
						font-family: Source Han Sans SC;
						font-weight: bold;
						font-size: 33rpx;
						color: #3E3D3D;
						line-height: 33rpx;
					}

					&__text {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #3E3D3D;
						line-height: 26rpx;
						margin-top: 23rpx;
					}
				}
			}

			&__footer {
				padding: 0 100rpx;
			}

			&__content {
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #3E3D3D;
				line-height: 30rpx;
				padding: 30rpx 65rpx 30rpx;

				&__b33 {
					font-weight: bold;
					font-size: 33rpx;
					margin-left: 30rpx;
				}
			}

			&__swp {
				margin-bottom: 12.5rpx;
			}
		}
	}

	/deep/.uni-swiper-slides {
		inset: 0 236rpx !important;
	}
	.kf{
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		bottom: 300rpx;
		right: 30rpx;
		background-color: #fff;
		border-radius: 50%;
	}
	
	
	.u-button{
		height: 60rpx;
	}
</style>